<template>
  <!-- 职业画像 -->
  <view>
    <view class="styleJobDescriptionContainer">
      <view class="styleJobDescriptionTitleContainer">
        <view class="styleJobDescriptionTitleLine"></view>
        <view class="styleJobDescriptionTitle"> {{ title }}</view>
      </view>
      <view class="content" v-if="positionInfo">
        <view class="top">
          <view class="left-title">
            <view class="left-top">
              <view class="left-top-left">平均薪酬</view>
              <view class="left-top-right">{{
                getSalary(positionInfo.averageSalary)
              }}</view>
            </view>
            <view class="left-bottom">
              <view class="left-bottom-left">招聘热度</view>
              <view class="left-bottom-right">{{ positionInfo.hotNum }}</view>
              <view
                :class="{
                  tagIcon: true,
                  upTrend: positionInfo.hotTrend == 1,
                  downTrend: positionInfo.hotTrend == 2,
                  noTrend: positionInfo.hotTrend == 0
                }"
              ></view>
            </view>
          </view>
          <view class="right-img">
            <img class="icon" :src="positionInfo.positionPic" alt="" />
          </view>
        </view>
        <view class="bottom">
          <view class="content">
            <view :class="[isIOS ? 'span-ios' : 'span-android']"
              >工作任务：</view
            >
            <view
              class="my-introduction"
              @click="changeHeight('introduction')"
              >{{ showMajorIntroduction }}</view
            >
            <view class="glass" v-if="!textareaHeight"></view>

            <view
              v-if="
                showMajorIntroduction && showMajorIntroduction != '暂无数据'
              "
              :class="[textareaHeight ? 'avatar-rotate' : 'avatar']"
              @click="changeHeight('introduction')"
            >
            </view>
          </view>
        </view>
      </view>
      <Empty
        v-else
        :baseImg="emptyImg"
        :text="emptyTitle"
        :fontWeight="400"
        textColor="#bfbfbf"
        class="empty"
        spacing="0"
      />
      <u-loading mode="circle" size="50" v-if="loading"></u-loading>
    </view>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </view>
</template>
<script>
import { getLayerDetailsData } from '@/api/modules/career';
import Empty from '@/components/Empty.vue';
import LoginDialog from '@/components/LoginDialog';

export default {
  components: {
    Empty,
    LoginDialog
  },
  props: {
    title: {
      type: String,
      default: '标题'
    },
    positionId: {
      type: String,
      default: ''
    },
    layerId: {
      type: String,
      default: null
    },
    positionName: {
      type: String,
      default: ''
    },
    pageName: {
      type: String,
      default: ''
    },
    isAuthSetting: {
      type: Boolean,
      default: false
    },
    personId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      positionSalaryAndHot: {},
      positionInfo: {
        answerContent: ''
      },
      emptyTitle: '暂无数据',
      textareaHeight: true, // true表示隐藏  false表示全部展示
      isIOS: uni.getSystemInfoSync().platform == 'ios',
      showMajorIntroduction: ''
    };
  },
  created() {
    this.isIOS = uni.getSystemInfoSync().platform == 'ios';
  },
  mounted() {
    this.getLayerDetailsDataFn();
  },
  methods: {
    getSalary(val) {
      if (!val) {
        return '-';
      } else {
        return '¥' + parseInt(+val.replace('¥', ''), 10);
      }
    },
    changeHeight(type) {
      if (type == 'introduction') {
        if (this.textareaHeight) {
          if (this.positionInfo.answerContent.length > 50) {
            this.showMajorIntroduction =
              this.positionInfo.answerContent.substring(0, 50);
          } else {
            this.showMajorIntroduction = this.positionInfo.answerContent;
          }
        } else {
          this.showMajorIntroduction = this.positionInfo.answerContent;
        }
        this.textareaHeight = !this.textareaHeight;
      }
    },
    async getLayerDetailsDataFn() {
      const params = {
        id: this.positionId,
        layerIds: this.layerId
      };
      const res = await getLayerDetailsData(params);
      if (res.code == 200) {
        const list = res.data[0].children;
        list.forEach((element) => {
          if (element.layerId == 216) {
            // 职业画像
            this.positionInfo.positionPic =
              element.children[0].data.positionPic;
          }
          if (element.layerId == 213) {
            // 职业薪酬热度
            this.positionInfo.averageSalary =
              '¥' + element.children[0].data.averageSalary;
            this.positionInfo.hotNum = element.children[0].data.hotNum;
            this.positionInfo.hotTrend = element.children[0].data.hotTrend;
          }
          if (element.layerId == 214) {
            // 工作任务
            this.positionInfo.answerContent =
              element.children[0].data.answerContent;
          }
        });
        this.changeHeight('introduction');
      } else {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        });
      }
    },
    loginSuccessBack() {
      uni.showToast({
        title: '登录成功',
        icon: 'none'
      });
      this.$emit('refreshData');
    }
  }
};
</script>
<style lang="scss" scoped>
@font-face {
  font-family: 'D-DIN-PRO-700-Bold';
  /*定义字体名称*/
  src: url('https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf');
}
$img-base-person: $img-base + 'career/';
.styleJobDescriptionContainer {
  background-color: white;
  border-radius: 16rpx;
  padding-top: 36rpx;
  padding-bottom: 28rpx;
  margin: 24rpx 16rpx;

  .styleJobDescriptionTitleContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 24rpx;

    .styleJobDescriptionTitleLine {
      width: 8rpx;
      height: 36rpx;
      border-radius: 64rpx;
      background-color: #f75a3e;
      margin-right: 16rpx;
    }

    .styleJobDescriptionTitle {
      color: #222222;
      font-size: 32rpx;
      font-weight: 800;
    }
  }
  .content {
    display: block;
    margin: 32rpx 16rpx;
    .top {
      display: flex;
      justify-content: space-between;
      .left-title {
        display: block;
        .left-top {
          display: flex;
          width: 380rpx;
          height: 80rpx;
          align-items: center;
          justify-content: flex-start;
          background-color: #f8f8f8;
          border-radius: 12rpx;
          margin-bottom: 12rpx;
          margin-bottom: 12rpx;
          .left-top-left {
            color: #7e8998;
            font-size: 28rpx;
            margin-left: 24rpx;
            margin-right: 14rpx;
          }
          .left-top-right {
            color: #333333;
            font-size: 30rpx;
            margin-right: 24rpx;
            font-family: 'D-DIN-PRO-700-Bold';
          }
        }
        .left-bottom {
          display: flex;
          width: 380rpx;
          height: 80rpx;
          align-items: center;
          background-color: #f8f8f8;
          border-radius: 12rpx;
          .left-bottom-left {
            color: #7e8998;
            font-size: 28rpx;
            margin-left: 24rpx;
            margin-right: 14rpx;
          }
          .left-bottom-right {
            color: #333333;
            font-size: 30rpx;
            font-size: 30rpx;
            font-family: 'D-DIN-PRO-700-Bold';
          }
          .tagIcon {
            width: 24rpx;
            height: 24rpx;
            margin: 7rpx 0 0 8rpx;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            &.upTrend {
              background-image: url($img-base + 'careerPath/majorTrendUp.png');
            }
            &.downTrend {
              background-image: url($img-base + 'careerPath/majorTrendDown.png');
            }
            &.noTrend {
              background-image: url($img-base + 'careerPath/majorTrendNo.png');
            }
          }
        }
      }
      .right-img {
        width: 168rpx;
        height: 168rpx;
        background: linear-gradient(45deg, #868aff 0%, #a8e4ff 100%);
        border-radius: 16rpx;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        .icon {
          width: 148rpx;
          height: 138rpx;
        }
      }
    }
    .bottom {
      margin-top: 48rpx;

      .content {
        font-family: D-DIN-PRO, D-DIN-PRO;
        font-weight: bold;
        font-size: 30rpx;
        color: #000000;
        margin-bottom: 36rpx;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        position: relative;
        margin: 0px;
        .avatar {
          position: absolute;
          top: 45%;
          right: 0;
          width: 32rpx;
          height: 32rpx;
          background-image: url($img-base-person + 'positionDictionary/downArrowInBasicInfo.png');
          background-size: 100%;

          img {
            width: 32rpx;
            height: 32rpx;
          }
        }

        .avatar-rotate {
          position: absolute;
          top: 90%;
          right: 0;
          width: 32rpx;
          height: 32rpx;
          transform: rotate(180deg);
          background-image: url($img-base-person + 'positionDictionary/downArrowInBasicInfo.png');
          background-size: 100%;

          img {
            width: 32rpx;
            height: 32rpx;
          }
        }

        span-ios {
          width: 150rpx;
          margin-top: 19rpx;
        }

        span-android {
          width: 150rpx;
          margin-top: 5rpx;
        }

        .introduction {
          /* flex-grow: 1; */
          width: 458rpx;
          overflow: hidden;
          /* max-height: 84rpx; */
          font-weight: 400;
          font-size: 28rpx;
          color: #666666;
          line-height: 40rpx;
          font-family: D-DIN-PRO, D-DIN-PRO;
          padding: 0;
        }

        .my-introduction {
          width: 458rpx;
          white-space: pre-wrap;
          font-weight: 400;
          font-size: 28rpx;
          color: #666666;
          line-height: 40rpx;
          font-family: D-DIN-PRO, D-DIN-PRO;
        }

        .glass {
          width: 20rpx;
          height: 100%;
          position: absolute;
          right: 32rpx;
          background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 0%,
            #ffffff 100%
          );
        }
        .u-input__textarea {
          padding: 0 !important;
        }
      }
    }
  }

  .profession-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 30rpx;

    .profession-item {
      height: 76rpx;
      background: #edf4ff;
      border-radius: 12rpx;
      align-items: center;
      margin-right: 14rpx;
      margin-bottom: 24rpx;
      padding: 18rpx 24rpx;
      box-sizing: border-box;
      text-align: center;
    }
  }

  .styleGridJobDescriptionItem {
    .styleGridJobDescriptionItemIcon {
    }

    .styleGridJobDescriptionItemText {
      margin-top: 6rpx;
      color: #555555;
      font-size: 24rpx;
    }

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
}

.emptyLoading {
  height: 450rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
span-ios {
  width: 150rpx;
  margin-top: 19rpx;
}

span-android {
  width: 150rpx;
  margin-top: 5rpx;
}

.introduction {
  /* flex-grow: 1; */
  width: 470rpx;
  overflow: hidden;
  /* max-height: 84rpx; */
  font-weight: 400;
  font-size: 28rpx;
  color: #666666;
  line-height: 40rpx;
  font-family: D-DIN-PRO, D-DIN-PRO;
  padding: 0;
}

.my-introduction {
  width: 470rpx;
  white-space: pre-wrap;
  font-weight: 400;
  font-size: 28rpx;
  color: #666666;
  line-height: 40rpx;
  font-family: D-DIN-PRO, D-DIN-PRO;
}

.glass {
  width: 20rpx;
  height: 100%;
  position: absolute;
  right: 32rpx;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
}

.lm-wechat {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

  ::v-deep button {
    background-color: transparent;
    padding: 0 !important;
    border: none;
    height: 100%;
  }

  ::v-deep .u-loading::after {
    background-color: transparent;
  }
}
</style>
